<template>
	<view class="dev-calendar-box">
		<!-- 顶部翻页 -->
		<!-- 	<view class="">
			<dev-date-flipping></dev-date-flipping>
		</view> -->
		<view class="dev-all-dates" :style="{'width':width=='100%'?width:`${width}rpx`}">
			<!-- 星期盒子 -->
			<view class="dev-week-box">
				<view class="dev-week-text-box" v-for="item in weekText" :key="item">
					{{item}}
				</view>
			</view>
			<view class="dev-swiper-box" circular :style="{'height':`${calendarDateHeight}rpx`}">

				<swiper @transition="transition" @animationfinish="animationfinish" class="dev-swiper-box" circular
					:style="{'height':`${calendarDateHeight}rpx`}" :indicator-dots="false" :duration="500">
					<swiper-item>
						<view class="dev-calendar-days">
							<view class="dev-date-box" :style="{'height':`${dateHeight}rpx`}" @tap="clickTime(item)"
								v-for="(item,index) in list" :key="item.time">
								<view
									:style="[item.time==chooseTime?selectedDateStyle:item.time==formatCurrentTime?currentDateStyle:item.disableSelection?prohibitSelectionStyle:item.notCurrentMonth?otherMonthStyle:normalDateStyle]">
									{{item.day}}
								</view>
							</view>
						</view>

					</swiper-item>
					<swiper-item>
						<view class="dev-calendar-days">
							<view class="dev-date-box" :style="{'height':`${dateHeight}rpx`}" @tap="clickTime(item)"
								v-for="(item,index) in list" :key="item.time">
								<view
									:style="[item.time==chooseTime?selectedDateStyle:item.time==formatCurrentTime?currentDateStyle:item.disableSelection?prohibitSelectionStyle:item.notCurrentMonth?otherMonthStyle:normalDateStyle]">
									{{item.day}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 	<view class="dev-calendar-days" :style="{'height':`${calendarDateHeight}rpx`}">
				<view class="dev-date-box" :style="{'height':`${dateHeight}rpx`}" @tap="clickTime(item)"
					v-for="(item,index) in list" :key="item.time">
					<view :style="[item.time==chooseTime?selectedDateStyle:item.time==formatCurrentTime?currentDateStyle:normalDateStyle]">
						{{item.day}}
					</view>
				</view>
			</view> -->


		</view>
		<view class="expand-and-collapse" v-if="isFold">
			<dev-svg-image @tap="clickToCollapse" :svg-name="expandOrNot?'stow':'open'" width="60" height="60">
			</dev-svg-image>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/common/utils/day/day.js'
	export default {
		name: "dev-calendar",
		props: {
			width: {
				type: [String, Number],
				default: '100%'
			},
			//开始时间
			startTime: {
				type: String,
				default: ''
			},
			//结束时间
			endTime: {
				type: String,
				default: ''
			},
			//默认时间
			defaultTime: {
				type: String,
				default: dayjs().format('YYYY-MM-DD HH:mm:ss')
			},
			//当前时间
			currentTime: {
				type: String,
				default: dayjs().format('YYYY-MM-DD HH:mm:ss')
			},
			//时间格式
			format: {
				type: String,
				default: 'YYYY-MM-DD'
			},
			//是否允许组件折叠
			isFold: {
				type: Boolean,
				default: true
			},
			//默认日历组件是否展开
			isOpen: {
				type: Boolean,
				default: true
			},
			//是否展示其他月份日期
			otherMonthDate:{
				type: Boolean,
				default: true
			},
			//选中日期的样式
			selectedDateStyle: {
				type: Object,
				default: () => ({
					'color': '#fff',
					'font-size': '28rpx',
					'font-weight': '600',
					'width': '60rpx',
					'height': '60rpx',
					'border-radius': '50%',
					'text-align': 'center',
					'line-height': '60rpx',
					'background-color': '#2EA7E0'
				})
			},
			//当前日期样式
			currentDateStyle: {
				type: Object,
				default: () => ({
					'color': '#fff',
					'font-size': '28rpx',
					'font-weight': '600',
					'width': '60rpx',
					'height': '60rpx',
					'border-radius': '50%',
					'text-align': 'center',
					'line-height': '60rpx',
					'background-color': '#81C042'
				})
			},
			//正常日期样式
			normalDateStyle: {
				type: Object,
				default: () => ({
					'color': '#333333',
					'font-size': '28rpx',
					'font-weight': '600',
					'width': '60rpx',
					'height': '60rpx',
					'border-radius': '50%',
					'text-align': 'center',
					'line-height': '60rpx',
				})
			},
			//禁止选择日期的样式
			prohibitSelectionStyle: {
				default: () => ({
					'color': '#fff',
					'font-size': '28rpx',
					'font-weight': '600',
					'width': '60rpx',
					'height': '60rpx',
					'border-radius': '50%',
					'text-align': 'center',
					'line-height': '60rpx',
					'background-color': '#ADADAD'
				})
			},
			//其他月份日期样式
			otherMonthStyle:{
				default: () => ({
					'color': '#9B9B9B',
					'font-size': '28rpx',
					'font-weight': '600',
					'width': '60rpx',
					'height': '60rpx',
					'border-radius': '50%',
					'text-align': 'center',
					'line-height': '60rpx',
				})
			},
			//日期高度
			dateHeight: {
				type: [String, Number],
				default: 100 //rpx
			},
			//显示行数（折叠后显示几行）
			showRowsNum: {
				type: [String, Number],
				default: 2 //rpx
			}

		},
		data() {
			return {
				weekText: ['一', '二', '三', '四', '五', '六', '日'],

				list: [], //日期盒子
				//当前月信息
				splitCurrentTime: {
					timeValue: '',
					year: '', //年
					month: '', //月
					day: '', //日
					totalDays: '', //总天数
				},
				//上个月信息
				lastMonthInformation:{
					timeValue: '',
					year: '', //年
					month: '', //月
					day: '', //日
					totalDays: '', //总天数
				},
				// 下个月信息
				nextMonthInformation:{
					timeValue: '',
					year: '', //年
					month: '', //月
					day: '', //日
					totalDays: '', //总天数
				},
				currentTimeList: [], //当前日期列表
				lastMonthTimeList:[],//上一个月日期表
				nextMonthTimeList:[],//下个月信息
				dateTotal: 42, //日期总值

				addDateSubscript: '', //从第几位开始添加日期

				formatCurrentTime: '', //格式化后的当前时间
				chooseTime: '', //当前选中日期
				expandOrNot: this.isOpen, //是否展开

				calendarDateHeight: '', //日历高度

				slidingDirection: '', //滑动方向
				
				

			};
		},
		created() {
			this.init(); //初始化日历
			this.calculateCalendarHeight(); //计算日历高度

			console.log(dayjs(this.currentTime).isBefore('2022-06-19', 'day'), '在之后吗')
		},
		methods: {
			//初始化日历
			init(time) {
				//获取默认时间或当前月份信息
				this.currentTimeList = dayjs(time ? time : this.defaultTime).format('YYYY,MM,DD').split(',');
				this.splitCurrentTime.year = this.currentTimeList[0];
				this.splitCurrentTime.month = this.currentTimeList[1];
				this.splitCurrentTime.day = this.currentTimeList[2];
				this.splitCurrentTime.timeValue =`${this.splitCurrentTime.year}-${this.splitCurrentTime.month}-${this.splitCurrentTime.day}`;
				this.splitCurrentTime.totalDays = dayjs(this.splitCurrentTime.timeValue).daysInMonth(); //计算当月总天数
				//上个月信息
				this.lastMonthTimeList = dayjs(this.splitCurrentTime.timeValue).subtract(1, 'month').format('YYYY,MM,DD').split(',');
				this.lastMonthInformation.year = this.lastMonthTimeList[0];
				this.lastMonthInformation.month = this.lastMonthTimeList[1];
				this.lastMonthInformation.day = this.lastMonthTimeList[2];
				this.lastMonthInformation.timeValue =`${this.lastMonthInformation.year}-${this.lastMonthInformation.month}-${this.lastMonthInformation.day}`;
				this.lastMonthInformation.totalDays = dayjs(this.lastMonthInformation.timeValue).daysInMonth();//计算上一个月总天数
				//下个月信息
				this.nextMonthTimeList = dayjs(this.splitCurrentTime.timeValue).add(1, 'month').format('YYYY,MM,DD').split(',');
				this.nextMonthInformation.year = this.nextMonthTimeList[0];
				this.nextMonthInformation.month = this.nextMonthTimeList[1];
				this.nextMonthInformation.day = this.nextMonthTimeList[2];
				this.nextMonthInformation.timeValue =`${this.nextMonthInformation.year}-${this.nextMonthInformation.month}-${this.nextMonthInformation.day}`;
				this.nextMonthInformation.totalDays = dayjs(this.nextMonthInformation.timeValue).daysInMonth();//计算下一个月总天数
				
				console.log(this.lastMonthInformation.totalDays,this.splitCurrentTime.totalDays,this.nextMonthInformation.totalDays, '上一个月总天数，当前月总天数，下一月总天数')
				
				this.chooseTime = dayjs(this.defaultTime).format(this.format); //当前选中的日期，默认为默认日期
				this.formatCurrentTime = dayjs(this.currentTime).format(this.format); //格式化当前时间
				let addIndex = dayjs(`${this.splitCurrentTime.year}-${this.splitCurrentTime.month}-01`).get('day');
				if (addIndex === 0) {
					this.addDateSubscript = 7;
				} else {
					this.addDateSubscript = addIndex;
				}
				this.list = [];
				for (let i = 1; i <= this.dateTotal; i++) {
					let minusValue = i - this.addDateSubscript;
					if (i >= this.addDateSubscript && minusValue < this.splitCurrentTime.totalDays) {
						let days = minusValue+1;
						this.list.push({
							time: dayjs(`${this.splitCurrentTime.year}-${this.splitCurrentTime.month}-${days}`).format(this.format),
							day: days,
							currentTime: this.formatCurrentTime,
							disableSelection: this.disableSelection(`${this.splitCurrentTime.year}-${this.splitCurrentTime.month}-${days}`), //是否禁止选择当前时间
						})
					} else {
						if(this.otherMonthDate){
							if(i<this.addDateSubscript){
								let days = this.lastMonthInformation.totalDays-this.addDateSubscript + 1 + i;
								this.list.push({
									notCurrentMonth:true,//不是当前卡片月里面的日期
									time: dayjs(`${this.lastMonthInformation.year}-${this.lastMonthInformation.month}-${days}`).format(this.format),
									day: days,
									currentTime: this.formatCurrentTime,
									disableSelection: this.disableSelection(`${this.lastMonthInformation.year}-${this.lastMonthInformation.month}-${days}`), //是否禁止选择当前时间
								})
							}
							if(minusValue >= this.splitCurrentTime.totalDays){
								let days = minusValue-this.splitCurrentTime.totalDays+1
								console.log()
								this.list.push({
									notCurrentMonth:true,//不是当前卡片月里面的日期
									time: dayjs(`${this.nextMonthInformation.year}-${this.nextMonthInformation.month}-${days}`).format(this.format),
									day: days,
									currentTime: this.formatCurrentTime,
									disableSelection: this.disableSelection(`${this.nextMonthInformation.year}-${this.nextMonthInformation.month}-${days}`), //是否禁止选择当前时间
								})
							}
							
						}else{
							this.list.push({
								time: '',
								day: '',
							})
						}
					}
				}
			},
			//计算日期是否禁止选择
			disableSelection(time) {
				let startBefore = this.startTime ? dayjs(time).isBefore(this.startTime, 'day') : false;
				let endAfter = this.endTime ? dayjs(time).isAfter(this.endTime, 'day') : false;
				// console.log(st)
				if (startBefore || endAfter) {
					return true
				} else {
					return false
				}

			},
			//计算日历高度
			calculateCalendarHeight() {
				if (this.isFold) {
					if (this.expandOrNot) {
						this.calendarDateHeight = this.dateHeight * 6;
					} else {
						this.calendarDateHeight = this.dateHeight * this.showRowsNum;
					}
				} else {
					this.calendarDateHeight = this.dateHeight * 6;
				}
			},
			//点击日历组件 选择日期
			clickTime(val) {
				if (val.time == '' || val.disableSelection) return
				this.chooseTime = val.time;
				this.$emit('input', val.currentTime);
				this.$emit('select', val)
				// this.$forceUpdate();
				console.log(val, '日期')
			},
			//抛出当前时间
			throwCurrentTime() {
				this.$emit('select', {
					time: this.formatCurrentTime,
				})
			},
			//点击折叠
			clickToCollapse() {
				this.expandOrNot = !this.expandOrNot;
				this.calculateCalendarHeight(); //计算日历高度
			},
			//日历滑动
			transition(e) {
				// console.log(e,'能分辨时滑动哪个方向吗')
				if (e.detail.dx > 0) {
					this.slidingDirection = 'right';
				} else {
					this.slidingDirection = 'left';
				}

			},
			//日历滑动结束
			animationfinish(e) {
				//如果时right 方向滑动 增加月份
				if (this.slidingDirection === 'right') {
					let nextTime = dayjs(this.splitCurrentTime.timeValue).add(1, 'month').format(this.format);
					this.init(nextTime);
					console.log(nextTime)
				} else {
					let lastTime = dayjs(this.splitCurrentTime.timeValue).subtract(1, 'month').format(this.format);
					this.init(lastTime);
					console.log(lastTime)
				}
				console.log(e, '滑动结束了')
			}





		}
	}
</script>

<style lang="scss">
	.dev-calendar-box {
		background: #FFFFFF;
	}

	.dev-all-dates {
		.dev-week-box {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.dev-week-text-box {
				width: 14.28%;
				text-align: center;
				color: #989DB3;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.dev-swiper-box {
			transition: all 1s;
			overflow: hidden;
		}

		.dev-calendar-days {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			// transition: all 1s;

			.dev-date-box {
				height: 100rpx;
				width: 14.28%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}

	//展开收起按钮
	.expand-and-collapse {
		display: flex;
		justify-content: center;
		background-color: #FFFFFF;
	}
</style>
